import { Table, Modal, message, Form, Input, Button } from 'antd'
import { useEffect, useState } from 'react'
import { flowInstancePage } from '@/api/test-case.js'
import TypeTreeSelect from '@/pages/components/type-tree-select/index.jsx'
import { findInstanceOrBranchDetail } from '@/api/project-flow.js'

// 分支、用例选择
const BranchSelect = ({ typeCode, busType, visible, onSuccess, onCancel}) => {
  const [data, setData] = useState([])
  const typeNmae = busType === '2' ? '用例' : '分支'
  const columns = [
    {
      title: '序号',
      dataIndex: 'key',
      width: 100,
      render(text, record, index) {
        return index + 1
      },
    },
    {
      title: typeNmae + '名称',
      dataIndex: 'instanceName',
      key: 'instanceName',
    },
  ]

  const otherTableProps = {
    rowKey: 'id',
    tableLayout: 'fixed',
    pagination: false,
    size: 'small',
    scroll: { y: 390 }
  }

  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const rowSelection = {
    type: 'radio',
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRowKeys)
    }
  }

  const [saving, setSaving] = useState(false)
  
  const onOk = () => {
    if (selectedRowKeys.length == 0) {
      return message.warning('请选择属性')
    }
    let selectRow = data.find(item => item.id == selectedRowKeys[0])
    setSaving(true)
    findInstanceOrBranchDetail({id: selectRow.id}).then((res) => {
      onSuccess(res.data)
      setSaving(false)
      onCancel()
    }).catch((err) => {
      console.log(err)
      setSaving(false)
    })
  }

  const [tableParams, setTableParams] = useState({
    pagination: {
      current: 1,
      pageSize: 10,
    },
  })

  const requestPage = (params) => {
    setSelectedRowKeys([])
    flowInstancePage({
      busType,
      pageNum: tableParams.pagination.current,
      pageSize: tableParams.pagination.pageSize,
      ...params,
    }).then(res => {
      const { pageInfo } = res.data
      let list = pageInfo.list
      setData(list)
      setTableParams({
        ...tableParams,
        pagination: {
          ...tableParams.pagination,
          total: pageInfo.total,
        },
      });
    })
  }

  const onFinish = (values) => {
    requestPage({...values, pageNum: 1})
  }

  const formProps = {
    layout: 'inline',
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
    onFinish,
    autoComplete: "off",
    style: {
      marginBottom: 20,
    }
  }

  useEffect(() => {
      if (visible) {
        requestPage({})
      }
  }, [visible, typeCode, busType])

  return (
    <Modal
      centered
      title={'选择' + typeNmae}
      width={600}
      confirmLoading={saving}
      open={visible || false}
      onOk={onOk}
      onCancel={onCancel}
    >
      <Form {...formProps}>
        <Form.Item label="类型" name="typeId">
          <TypeTreeSelect typeCode={typeCode} style={{width: '140px'}}/>
        </Form.Item>
        <Form.Item label="名称" name="instanceName">
          <Input allowClear  placeholder="请输入名称" autoComplete='off'/>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
        </Form.Item>
      </Form>
      <Table
        dataSource={data}
        pagination={tableParams.pagination}
        rowSelection={{
          selectedRowKeys,
          ...rowSelection
        }}
        columns={columns}
        {...otherTableProps}
      />
    </Modal>
  )
}

BranchSelect.displayName = 'QuotenSelect'

export default BranchSelect
